import { Alert } from "antd";
import "./MikuAlert.css";
import type { ReactNode } from "react";

type OmitAlertProps = Omit<React.ComponentProps<typeof Alert>, 'banner'>;

interface MikuAlertProps extends OmitAlertProps {
  effects?: {
    glow?: boolean;
    pulse?: boolean;
    hover?: boolean;
    shine?: boolean;
  };
}

export const MikuAlert = ({
  message,
  description,
  type = "info",
  effects = {
    glow: true,
    pulse: false,
    hover: true,
    shine: false,
  },
  closable = false,
  style,
  ...restProps
}: MikuAlertProps) => {
  const { glow = true, pulse = false, hover = true, shine = false } = effects;
  
  const mergedStyle = {
    margin: '8px 0',
    ...style,
  };
  
  const alertClasses = `miku-alert miku-alert-${type} 
    ${glow ? 'miku-glow' : ''} 
    ${pulse ? 'miku-pulse' : ''} 
    ${hover ? 'miku-hover' : ''}
    ${shine ? 'miku-shine' : ''}`;

  return (
    <Alert 
      message={message}
      description={description}
      type={type}
      className={alertClasses}
      closable={closable}
      style={mergedStyle}
      {...restProps}
    />
  );
};
    